<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>09图片加载到canvas</title>
		<style type="text/css">
			#firCan {
				display: block;
				border: 1px solid khaki;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="firCan" width="1000" height="625">
			您的浏览器版本过低, 不支持Canvas, 请升级!
		</canvas>
	</body>
	<script type="text/javascript">
		// 1, 获取Canvas
		var firCan = document.getElementById("firCan");
		// 2, 获取 2d渲染上下文
		var context = firCan.getContext('2d');
		// 3, 加载图片
		// 创建 img对象
		var imgObj = new Image();
		// 设置 src
		imgObj.src = "img/banner3.png";
		// 图片加载完毕
		imgObj.onload = function() {
			// 图片绘制到 canvas: drawImage()
			/*
			 * 方式一: drawImage(img, x, y)
			 * 三个参数:
			 * 		img		要绘制的图片
			 * 		x 和 y	确定要绘制的位置
			 */
			context.drawImage(imgObj, 0, 0);
			/*
			 * 方式二: drawImage(img, x, y, w, h)
			 * 五个参数:
			 * 		img		要绘制的图片
			 * 		x 和 y	确定要绘制的位置
			 * 		w 和 h	确定要绘制的大小
			 */
			context.drawImage(imgObj, 0, 0, 1000, 500);
			/*
			 * 方式三: drawImage(img, sx, sy, sw, sh, x, y, w, h)
			 * 九个参数:
			 * 		img		要绘制的图片
			 * 		sx和sy	要在图片上的截取位置
			 * 		sw和sh	要截取的图片大小
			 * 		x 和 y	要绘制在canvas上的位置
			 * 		w 和 h	要在canvas上绘制的大小
			 */
			context.drawImage(imgObj, 500, 500, 100, 100, 500, 0, 200, 200);
			
			context.drawImage(imgObj, 0, 0, 1280, 800, 0, 0, 1000, 625);
		}
		
		
		
	</script>
</html>
